import React from 'react'

import { useDispatch, useSelector } from 'react-redux'

import { getMovieListAction } from '../../store/slices/movie_slice'

export default function Movie() {

  /* const { count } = store.getState().countReducer
  const { movieList } = store.getState().movieReducer */
  const { count } = useSelector(state => state.countReducer)
  const { movieList } = useSelector(state => state.movieReducer)

  const dispatch = useDispatch()

  const queryMoveList = () => {
    dispatch(getMovieListAction())
  }

  return (
    <div>
      <h2>Movie</h2>
      <div>
        <p>count: {count}</p>
        <button onClick={queryMoveList}>查询 movie</button>
        <hr />
        <ul>
          {
            movieList.map(item => {
              const { albumId, albumName } = item
              return (
                <li key={albumId}>{albumName}</li>
              )
            })
          }
        </ul>
      </div>
    </div>
  )
}
